<template>
    <el-dropdown>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="handleProfileClick">个人简介</el-dropdown-item>
                <el-dropdown-item @click="handleSettingsClick">设置</el-dropdown-item>
                <el-dropdown-item divided @click="handleLogoutClick">退出登陆</el-dropdown-item>
                <slot></slot>
            </el-dropdown-menu>
        </template>
        <Avatar :src="src" :size="size" :alt="alt" :username="username" :icon="icon" />
    </el-dropdown>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
import Avatar from './Avatar.vue';
import { User as UserIcon } from '@element-plus/icons-vue';

const props = defineProps({
    size: {
        type: [Number, String],
        default: 40,
    },
    src: {
        type: String,
        default: '',
    },
    alt: {
        type: String,
        default: 'avatar',
    },
    username: {
        type: String,
        default: '',
    },
    icon: {
        type: Object,
        default: () => UserIcon,
    },
});

const emit = defineEmits(['profile', 'settings', 'logout']);

const handleProfileClick = () => {
    emit('profile');
};

const handleSettingsClick = () => {
    emit('settings');
};

const handleLogoutClick = () => {
    emit('logout');
};
</script>

<style scoped>
.el-avatar {
    cursor: pointer;
}
</style>